<template>
  <view class="product">
    <view class="product-wrapper">
      <view class="list-wrap">
        <view class="wrap-goods">
          <view v-if="productDetail.images">
            <view class="carousel">
              <swiper
                indicator-dots
                circular="true"
                duration="400"
                controls
                touchable
              >
                <swiper-item
                  class="swiper-item"
                  v-for="(item, index) in productDetail.images"
                  :key="index"
                >
                  <image
                    :src="item.path"
                    mode="aspectFill"
                    class="img-goods"
                  ></image>
                  <uni-tag
                    class="content bg-grey"
                    circle
                    size="small"
                    :text="`${index + 1}  / ${productDetail.images.length}`"
                  ></uni-tag>
                </swiper-item>
              </swiper>
            </view>
          </view>
          <view class="txt">
            <text class="txt-goods">{{ productDetail.title }}</text>
          </view>
          <view class="txt border-bottom">
            <text class="price-goods">{{ productDetail.price }}</text>
          </view>
          <view class="txt-detail">
            <text class="txt-goods">规格</text>
            <view
              v-for="(item, index) in productDetail.spec"
              @tap="handleSpecIndex(index)"
              :key="index"
            >
              <view
                v-if="item.spec"
                :class="[specIndex === index ? 'on' : '']"
                class="txt-goods"
              >
                {{ item.spec }}
              </view>
            </view>
          </view>
          <view class="txt-detail">
            <text class="txt-goods">地址</text>
            <view class="txt-goods" style="width: 55%">{{
              productDetail.business && productDetail.business.address
            }}</view>
            <image
              :src="icon_daohang"
              mode="aspectFill"
              @tap="openMapRoute()"
            ></image>
          </view>
          <view class="txt-title"> / 图片详情 / </view>
          <view class="txt-titles">
            {{ productDetail.content }}
          </view>
          <view
            v-for="(item, index) in productDetail.content_images"
            :key="index"
          >
            <image
              :src="item.path || productImg"
              class="img-goods"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="image-wrappers">
          <view class="box" @tap="navTo('/pages/user/coupon/detail')">
            <image alt="" :src="icon_dianpu" class="image-item"></image>
            <view> 店铺 </view>
          </view>
          <view class="box" @tap="toFavorite">
            <image
              alt=""
              :src="productDetail.favorite ? icon_shoucang_pre : icon_shoucang"
              class="image-item"
            ></image>
            <view> 收藏 </view>
          </view>
        </view>
        <button class="add-btn" @tap="confirm">拨打电话</button>
      </view>
    </view>
    <view class="popup" :class="specClass">
      <view class="mask" @tap="hide"></view>
      <view class="layer">
        <slot name="popup">
          <view class="popup-title"> 分享至 </view>
          <view class="popup-image">
            <view class="popup-image-item" @tap="formSubmit('WXSceneSession')">
              <image
                alt=""
                :src="icon_weixinhaoyou"
                class="popup-item-image"
              ></image>
              <view class="text"> 微信好友 </view>
            </view>
            <view @tap="formSubmit('WXSenceTimeline')" class="popup-image-item">
              <image
                alt=""
                :src="icon_pengyouquan"
                class="popup-item-image"
              ></image>
              <view class="text"> 朋友圈 </view>
            </view>
          </view>
        </slot>
      </view>
    </view>
    <!--页面加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading
  ></view>
</template>
<script>
import { product, favorite, callPhone } from "@/api/product";
import indexConfig from "@/config/index.config";
import rfNoData from "@/components/rf-no-data";
import navBartab from "@/components/nav-bar-tab/index.vue";
export default {
  components: {
    rfNoData,
    navBartab,
  },
  data() {
    return {
      productDetail: {},
      specIndex: 0,
      loading: true,
      errorInfo: "",
      userInfo: {},
      scrollTop: 0,
      currentUrl: "",
      hasLogin: false,
      productImg:
        "https://www.yllook.com/attachment/images/2020/05/18/image_1589787780_Zx2m2Frc.png",
      specClass: "none",
      navDetailShow: true,
      nav_back: this.$mAssetsPath.nav_back,
      icon_shoucang_pre: this.$mAssetsPath.icon_shoucang_pre,
      nav_fenxiang: this.$mAssetsPath.nav_fenxiang,
      icon_daohang: this.$mAssetsPath.icon_daohang,
      icon_dianpu: this.$mAssetsPath.icon_dianpu,
      icon_shoucang: this.$mAssetsPath.icon_shoucang,
      appName: this.$mSettingConfig.appName,
      icon_pengyouquan: this.$mAssetsPath.icon_pengyouquan,
      icon_weixinhaoyou: this.$mAssetsPath.icon_weixinhaoyou,
    };
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    this.specClass = "show";
  },
  // #endif
  onLoad(options) {
    this.productId = options.id;
    this.hasLogin = this.$mStore.getters.hasLogin;
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.initData();
  },
  methods: {
    handleSpecIndex(index) {
      this.productDetail.price = this.productDetail.spec[index].price;
      this.specIndex = index;
    },
    // 数据初始化
    async initData() {
      this.hasLogin = this.$mStore.getters.hasLogin;
      await this.getProductDetail();
    },
    // 获取产品详情
    async getProductDetail() {
      await this.$http
        .get(`${product}/${this.productId}`)
        .then(async (r) => {
          this.loading = false;
          this.productDetail = r.data;
          this.productDetail.price = r.data.spec[0].price;
          console.log(r);
        })
        .catch((err) => {
          this.loading = false;
          this.errorInfo = err;
        });
    },
    async confirm() {
      await this.$http
        .get(`${callPhone}/${this.productId}`)
        .then(async (r) => {
          uni.makePhoneCall({
            phoneNumber: this.productDetail.business.phone,
            success: function () {},
          });
        })
        .catch((err) => {});
    },
    show() {
      this.specClass = "block";
    },
    hide() {
      this.specClass = "none";
    },
    // 收藏
    async toFavorite() {
      if (this.hasLogin) {
        this.productDetail.favorite
          ? this.handleCollectDel()
          : this.handleCollectCreate();
      } else {
        this.$mRouter.push({ route: "/pages/public/login" });
      }
    },
    // 取消收藏商品
    async handleCollectDel() {
      await this.$http
        .post(`${favorite}`, {
          product_id: this.productId,
        })
        .then(() => {
          this.$mHelper.toast("取消收藏成功");
          this.getProductDetail();
        });
    },
    // 收藏商品
    async handleCollectCreate() {
      await this.$http
        .post(`${favorite}`, {
          product_id: this.productId,
        })
        .then(() => {
          this.$mHelper.toast("收藏成功");
          this.getProductDetail();
        });
    },
    navTo(route) {
      if (!route) return;
      if (!this.hasLogin) {
        this.$mRouter.push({ route: "/pages/public/login" });
      } else {
        this.$mRouter.push({
          route,
          query: { id: this.productDetail.business_id },
        });
      }
    },
    formSubmit(type) {
      const origin = indexConfig.baseUrl;
      uni.share({
        provider: "weixin",
        scene: type,
        type: 0,
        href: `${origin}/h5/#/pages/product/product?id=${this.productId}`,
        title: this.productDetail.title,
        summary: "这是商品详情的分享",
        imageUrl: this.productDetail.images[0].images,
        success: function (res) {
          uni.showToast({
            title: "已分享",
            duration: 2000,
          });
        },
        fail: function (err) {
          var errrr = JSON.stringify(err);
          if (errrr) {
            console.log(errrr);
          }
        },
      });
    },
    openMapRoute() {
      console.log(this.productDetail.business.latitude);
      uni.openLocation({
        latitude: Number(this.productDetail.business.latitude),
        longitude: Number(this.productDetail.business.longitude),
        success: function () {
          console.log("success");
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
page {
  background-color: #fff;
}
.border-bottom {
  border-bottom: 1upx solid #eeeeee;
}
.product {
  .product-wrapper {
    padding-bottom: 100upx;
    .list-wrap {
      width: 100%;
      padding: 10upx 0 0 0;
      .wrap-goods {
        width: 100%;
        border-bottom: solid 1px #eee;
        .img-goods {
          width: 100%;
        }
        .txt-detail {
          padding: 24upx;
          width: 100%;
          font-size: 28upx;
          font-family: PingFang SC;
          font-weight: 500;
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;
          .txt-goods {
            padding-right: 70upx;
            margin-right: 10upx;
            padding: 5upx 20upx;
            &.on {
              background: red;
              color: #fff;
            }
          }
          image {
            height: 20upx;
            width: 20upx;
            margin-left: 150upx;
          }
        }
        .txt {
          padding: 24upx;
          .txt-goods {
            font-weight: bold;
            color: #333;
            font-size: 30upx;
            margin: 24upx 0;
          }
          .price-goods {
            font-size: 34upx;
            color: #f91c1c;
            font-weight: bold;
          }
        }
        .txt-title {
          height: 96upx;
          line-height: 96upx;
          text-align: center;
          background: #f9f9f9;
          font-size: 28upx;
          font-weight: bold;
        }
        .txt-titles {
          height: 96upx;
          padding-left: 20upx;
          line-height: 96upx;
          background: #f9f9f9;
          font-size: 28upx;
          font-weight: bold;
        }
      }
    }
    .btn-box {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100upx;
      background: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .image-wrappers {
        width: 300upx;
        align-items: center;
        display: flex;
        text-align: center;
        justify-content: space-around;
        .box {
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 22upx;
          font-family: PingFang SC;
          font-weight: 500;
          margin-top: 10upx;
          color: #999999;
          image {
            width: 38upx;
            margin-bottom: 5upx;
            height: 38upx;
          }
        }
      }
      .add-btn {
        width: 460upx;
        height: 80upx;
        background: #f91c1c;
        border-radius: 40upx;
        color: #fff;
        font-size: 30upx;
        font-family: PingFang SC;
        font-weight: 500;
      }
    }
  }
}
.carousel {
  height: 459upx;
  position: relative;
  swiper {
    height: 100%;
  }
  .image-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-item {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 750upx;
    overflow: hidden;
    border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
    .img-goods {
      width: 100%;
    }
    .content {
      position: absolute;
      right: $spacing-base;
      bottom: $spacing-base;
    }
  }
}
.nav-bar-tab {
  .left-image {
    width: 16upx;
    height: 29upx;
  }
  .image-item {
    width: 34upx;
    height: 36upx;
  }
}
.bg-grey {
  background-color: #8799a3;
  color: #fff;
}
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  &.show {
    display: block;
    .mask {
      animation: showPopup 0.2s linear both;
    }
    .layer {
      animation: showLayer 0.2s linear both;
    }
  }
  &.hide {
    .mask {
      animation: hidePopup 0.2s linear both;
    }
    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }
  &.none {
    display: none;
  }
  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .layer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    height: 348upx;
    border-radius: 10upx 10upx 0 0;
    background-color: #fff;
    .popup-title {
      width: 100%;
      text-align: center;
      padding: 32upx 0;
      font-size: 32upx;
      font-weight: bold;
    }
    .popup-image {
      display: flex;
      justify-content: space-around;
      padding: 33upx 0;
      .popup-image-item {
        text-align: center;
      }
      .popup-item-image {
        height: 90upx;
        width: 90upx;
        font-size: 24upx;
        font-weight: 500;
        color: #333333;
      }
      .text {
        font-size: 24upx;
        color: #333333;
        font-weight: 500;
      }
    }
  }
  &.service {
    min-height: 600upx;
    .row {
      margin: 30upx;
      .title {
        font-size: 30upx;
        margin: 10upx 0;
      }
      .description {
        font-size: 28upx;
        color: #999;
      }
    }
  }
  @keyframes showPopup {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes hidePopup {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(120%);
    }
  }
  .iconfont {
    margin-left: 0.13rem;
    font-size: 50upx;
    color: #717171;
  }
}
</style>
